<template>
  <div class="commentA" v-show="userMes.uAvatar">
    <div class="comment">
      <img :src="userMes.uAvatar" alt="" class="comment_avatar" />
      <div class="comment_input">
        <el-input placeholder="请输入内容" v-model="input" clearable></el-input>
      </div>
      <el-button type="primary" @click="toComment(input, pId)">评论</el-button>
    </div>
    <!-- /*表情弹框打开按钮*/ -->
    <div class="emoji">
      <span class="EmotionButton" @click="OpenEmotions()">
        <i class="iconfont icon-xiaolian"></i>
      </span>
      <Emotion class="emoji_emotion" ref="EmotionB" @AppendInputValue="AppendMessageText"></Emotion>
    </div>
  </div>
</template>
<script>
import Emotion from './EmoticonListCover.vue'
export default {
  inject: ['reload'], //注入依赖
  props: {
    pId: {
      type: Number,
      default () {
        return {}
      }
    }
  },
  name: 'component_name',
  components: {
    Emotion
  },
  data () {
    return {
      input: '',
      userMes: {}
    }
  },
  created () {
    if(this.cookies.getUid('uId')!=undefined){
      this.getUserByuId(this.cookies.getUid('uId'))
    }
  },
  methods: {
    toComment (input, pId) {
      let reply = {}
      reply.rContent = input
      reply.pId = pId
      reply.rTime = this.common.formateDate(new Date(),'yyyy-MM-dd hh:mm:ss')
      // reply.rTime = new Date()
      reply.fromuId = Number(this.cookies.getUid('uId'))
      console.log(reply)
      this.$axios.addComment(reply).then(res => {
        console.log(res)
        if (res.data == 20000) {
          this.input = ''
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.reload()
        } else {
          this.$message({
            message: res.message,
            type: 'warning'
          })
        }
      })
    },
    // 根据uId获取用户信息
    getUserByuId (uId) {
      let params = {}
      params.uId = uId
      console.log(params)
      this.$axios.getUserByuId(params).then(res => {
        console.log(res)
        this.userMes = res.data
      })
    },
    // 打开表情包弹框
    OpenEmotions: function () {
      this.$refs.EmotionB.OpenEmotion(true)
    },
    //表情选中后追加在input
    AppendMessageText: function (EmotionChinese) {
      this.input += EmotionChinese
    }
  }
}
</script>
<style scoped>
.commentA {
}
.EmotionButton {
  margin-left: 60px;
}
.EmotionButton i {
  font-size: 1.5em;
}
.comment {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.comment_avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.comment_input {
  flex: 1;
  margin: 0 10px;
}
.emoji {
  position: relative;
}
.emoji_emotion {
  position: absolute;
  top: 10px;
}
</style>
